<template>
  <view class="u-p-24">
    <view class="block">
      <view class="title">我的订单</view>
      <u-grid :col="5" :border="false">
        <u-grid-item v-for="(i, k) in myorder" :key="k" :custom-style="{ padding: '24rpx 0 0 0' }" @click="myorderHandler(k)">
          <image class="icon" :src="i.src" mode=""></image>
          <view class="text">{{i.title}}</view>
        </u-grid-item>
      </u-grid>
    </view>

    <view class="block">
      <view class="title">奇呱服务</view>
      <u-grid :col="4" :border="false">
        <u-grid-item v-for="(i, k) in qigua" :key="k" :custom-style="{ padding: '24rpx 0 0 0' }" @click="qiguaHandler(k)">
          <image class="icon" :src="i.src" mode=""></image>
          <view class="text">{{i.title}}</view>
        </u-grid-item>
      </u-grid>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        myorder: [{
            src: '/static/images/mine/peisong.png',
            title: '骑手配送',
            url: '/pages/order/peisong'
          },
          {
            src: '/static/images/mine/wuliu.png',
            title: '物流配送',
            url: '/pages/order/wuliu'
          },
          {
            src: '/static/images/mine/yuyue.png',
            title: '门店自提',
            url: '/pages/order/ziti'
          },
          {
            src: '/static/images/mine/ziti.png',
            title: '门店消费'
          },
          {
            src: '/static/images/mine/quhao.png',
            title: '门店取号',
            url: '/pages/shop/quhao'
          },
        ],
        qigua: [{
            src: '/static/images/mine/weizhi.png',
            title: '收货地址',
            url: '/pages/mine/address/list'
          },
          {
            src: '/static/images/mine/renzheng.png',
            title: '实名认证',
            url: '/pages/mine/shiming'
          },
          {
            src: '/static/images/mine/ruzhu.png',
            title: '申请入驻'
          },
          {
            src: '/static/images/mine/huiyuan.png',
            title: '会员中心',
            url: '/pages/huiyuan/index'
          },
          {
            src: '/static/images/mine/shoucang.png',
            title: '我的关注',
            url: '/pages/mine/follow'
          },
          {
            src: '/static/images/mine/kefu.png',
            title: '联系客服'
          },
          {
            src: '/static/images/mine/fankui.png',
            title: '功能反馈',
            url: '/pages/mine/fankui'
          },
          {
            src: '/static/images/mine/kefu.png',
            title: '领券中心',
            url: '/pages/coupon/index'
          },
        ],
      }
    },
    methods: {
      myorderHandler(k) {
        let target = this.myorder[k]
        if (target.url) {
          this.$goto(target.url)
        }
      },
      qiguaHandler(k) {
        let target = this.qigua[k]
        if (target.url) {
          this.$goto(target.url)
        }
      }
    }
  }
</script>

<style lang="scss">
  .block {
    background: #FFFFFF;
    border-radius: 8rpx;
    padding: 24rpx;
    margin-bottom: 24rpx;

    .title {
      font-size: 30rpx;
      line-height: 60rpx;
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
    }

    .icon {
      width: 68rpx;
      height: 68rpx;
    }

    .text {
      font-size: 24rpx;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #999999;
      line-height: 60rpx;
    }
  }
</style>
